<template>
  <div id="player"></div>
</template>

<script>
import 'xgplayer'
import HlsPlayer from 'xgplayer-hls'
export default {
  data: () => ({
    player: null
  }),

  props: {
    src: String,
    poster: String
  },

  watch: {
    src (_src) {
      // this.player.start(_src)
      this.player.start(_src)
    },
    poster (_poster) {
      this.player.poster = _poster
    }
  },


  methods: {
    init () {
      this.$nextTick(() => {
        this.player = new HlsPlayer({
          crossOrigin: false,
          id: 'player',
          "playsinline": true,
          "whitelist": [
              ""
          ],
          "poster": "https://wechatapppro-1252524126.file.myqcloud.com/app2nfexwii6708/image/b_u_6086643f7cdb7_XMfSUbYJ/kru36fy807fo.png",
          "width": 400,
          "height": 300,
          "x5-video-player-type": "h5",
          "x5-video-player-fullscreen": "true",
          "autoplay": false,
          "fluid": true
        })
      })
    }
  },

  created () {
    this.init()
  }
}
</script>

<style scoped> 
#player {
  width: 100%;
}
</style>